//Colors
$color-white: #ffffff;
$color-light-white: #fefefe;
$color-grey: #67757f;
$color-light-grey: #EFEFEF;
//$color-black: #000000;
$color-black: #30a4fc;
$color-blue-shallow: #a9dbf9;
$color-blue: #95d2f6;
$color-blue-active: #30a4fc;// 活跃状态下的蓝色
$color-blue-light: #2aa3ef;
$color-blue-dark: #2796dd;
$color-red: rgb(245, 108, 108);

// Theme Global Color
//$theme-color: $color-blue;
//$theme-background-color: #e6ecf0;
//$theme-header-color: $color-light-white;
//$theme-footer-color: $theme-background-color;
//$theme-play-bar-color: $color-light-white;
// 主题颜色
$theme-color: $color-blue; // 主要主题颜色
$theme-background-color: #e6ecf0; // 背景颜色
$theme-header-color: $color-light-white; // 头部背景颜色
$theme-footer-color: $theme-background-color; // 底部背景颜色
$theme-play-bar-color: $color-light-white; // 播放条颜色

// Fonts
$font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
  Helvetica Neue, Helvetica, Arial, sans-serif;
// $font-family: Avenir, Helvetica, Arial, sans-serif;
//$font-size-default: 1rem;
//$font-size-logo: 1.5rem;
//$font-size-header: 1rem;
$font-size-default: 1rem; // 默认字体大小
$font-size-logo: 1.5rem; // 标志字体大小
$font-size-header: 1rem; // 标题字体大小

// header
//$header-height: 60px;
//$header-padding: 0 4%;
//$header-margin: 0;
//$header-logo-width: 10%;
//$header-logo-margin: 0 10px;
//$header-nav-padding: 0 0.5rem;
//$header-nav-margin: 0 0.5rem;
//$header-search-radius: 10px;
//$header-search-height: $header-height - 20px;
//$header-search-max-width: 25vw;
//$header-search-min-width: 200px;
//$header-search-btn-height: ($header-height / 2);
//$header-search-btn-width: 60px;
//$header-user-width: ($header-height / 1.7);
//$header-user-margin: 1rem;
//$header-user-radius: 50%;
//$header-menu-width: 150px;
//$header-menu-padding: 7px 0px;
//$header-menu-radius: 4px;
//$color-text: #333;
// 头部样式
$header-height: 60px; // 头部高度
$header-padding: 0 4%; // 头部内边距
$header-margin: 0; // 头部外边距
$header-logo-width: 10%; // 头部标志宽度
$header-logo-margin: 0 10px; // 头部标志外边距
$header-nav-padding: 0 0.5rem; // 导航内边距
$header-nav-margin: 0 0.5rem; // 导航外边距
$header-search-radius: 10px; // 搜索框圆角
$header-search-height: $header-height - 20px; // 搜索框高度
$header-search-max-width: 25vw; // 搜索框最大宽度
$header-search-min-width: 200px; // 搜索框最小宽度
$header-search-btn-height: ($header-height / 2); // 搜索按钮高度
$header-search-btn-width: 60px; // 搜索按钮宽度
$header-user-width: ($header-height / 1.7); // 用户图标宽度
$header-user-margin: 1rem; // 用户图标外边距
$header-user-radius: 50%; // 用户图标圆角
$header-menu-width: 150px; // 头部菜单宽度
$header-menu-padding: 7px 0px; // 头部菜单内边距
$header-menu-radius: 4px; // 头部菜单圆角
$color-text: #333; // 主要文本颜色

//// page
//$content-padding: 0 8% 20px 8%;
//$border-radius-songlist: 12px;
// 页面样式
$content-padding: 0 8% 20px 8%; // 页面内容内边距
$border-radius-songlist: 12px; // 歌单圆角

// footer
$footer-height: 100px;// 底部高度

// 当前播放区域宽度
$current-play: 350px;

// 播放条样式
$play-bar-height: 60px;// 播放条高度

// 样式设置
$box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);// 阴影效果

//// Media queries
//$sm: 668px;
//$bg: 1024px;
//$md: 1300px;
//$lg: 1450px;
// 媒体查询断点
$sm: 668px; // 小屏幕断点
$bg: 1024px; // 中等屏幕断点
$md: 1300px; // 大屏幕断点
$lg: 1450px; // 超大屏幕断点
